
<template>
  <div  class="main-div">
    <Row>
      <Col span="4">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"></Tree>
      </Col>
      <Col span="20">
        <Card  dis-hover class="task-card">
          <div class="app-container">


            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  border
                >
                  <el-table-column
                    fixed
                    prop="categoryName"
                    label="分类"
                    width='180'
                    show-overflow-tooltip
                    >
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="流程名称"
                    show-overflow-tooltip
                   >
                  </el-table-column>
                  <el-table-column
                    prop="key"
                    label="别名"
                    show-overflow-tooltip
                   >
                  </el-table-column>
                  <el-table-column
                    prop="description"
                    label="描述"
                    show-overflow-tooltip
                   >
                  </el-table-column>
                  <el-table-column
                    prop="version"
                    label="版本"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"


                  >
                    <template slot-scope="scope">
                      <el-button   size='mini' type='text' icon="el-icon-edit"  @click="handleClick(scope.row)"></el-button>


                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-row>
          </div>
        </Card>
      </Col>


    </Row>
    <Row>
      <Col span="24">
      <footer></footer>
      </Col>
    </Row>
  </div>


</template>

<script>
  import {getTaskData, getTaskChartData,getBpmnModelCategory} from "@/api/analy";
  import {getAllDef} from "@/api/cockpit";
  import Footer from '../../../common/footer';

  export default {
    name: 'Task',
    components:{
      Footer
    },

    data() {
      return {
        tableData: [],
        tableHeight: 450,
        queryDate:[],
        total: 0,
        chartVisible: false,
        chartData: {},
        sellerId: 0,
        shopName: [],
        queryForm: {
          name: "",
          createTime: "",
          page: 0,
          limit: 10,
          whereSql: "",
          typeKey: ""
        },
        categoryData: [
        ]
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      queryFormCreateTime:function(e){
        this.queryForm.createTime=e;
      },
      refreshTask:function(data){
        if (data){
          this.queryForm.typeKey=data[0].typeKey
        }
        this.getAllDef()

      },
      queryMethod:function(){
       var name=  this.queryForm.name;
       var whereSql='';
       var createTime=  this.queryForm.createTime;
       if (createTime ){
         if (createTime[0]){
           whereSql="  CREATE_TIME_  between '"+createTime[0]+"' and "+"'"+createTime[1]+"'";
         }

       }
       this.queryForm.whereSql=whereSql;
        getTaskData(this.queryForm).then((response) => {
          this.tableData = response.data
          if (response.count.length>0){
            this.total = parseInt(response.count);
          }else{
            this.total=0;
          }

        })

      },
      getAllDef:function(){
        getAllDef(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data

        })
        this.getAllDef();

      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      handleClick(data) {
        this.$router.push({ name:'cockpitDetailIndex', query: { t: new Date().getTime(),"processefinitionId":data.id}})
      },
      search() {
        this.queryForm.page = 0
        this.queryMethod()
      },
      reset() {
        this.queryForm.name = "";
        this.queryForm.createTime = "";
        this.queryForm.whereSql = "";
        this.queryDate = [];
        this.getData()
      }

    }

  }

</script>
<style lang="scss">
.task-card{
  margin-top: 10px;
}

</style>
